How can I customize colors based on data values in a map chart?

Question Description

How can I customize the rules for map color in vchart demo? The configuration in the example does not meet my needs: When the value falls within a certain range, I want to display a specific color.

Solution

In VChart, you can achieve your requirement by configuring the fill attribute in the mark style callback function. For example:

const colorGroup = [
  {
    range: [1, 100],
    color: 'rgb(252,250,97)'
  },
  {
    range: [101, 200],
    color: 'rgb(252,150,134)'
  },
  {
    range: [201, 300],
    color: 'rgb(87,33,15)'
  }
];

area: {
  style: {
    fill: datum => {
      const res = colorGroup.find(item => item.range[0] <= +datum.value && item.range[1] >= +datum.value);
      return res ? res.color : 'WhiteSmoke';
    };
  }
}

Code Example

Quote

• More demo
• Map Tutorial
• Related Api
• github